<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${_ctx}" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加规格商品</title>
<link rel="stylesheet" type="text/css" href="css/htaddcomcs.css"/>
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript">
	$(function(){
		$(".mail-option select").change(function(){
			if($(this).find("option:selected").attr("atvid")==undefined){
				
			}else{
				str=$(this).attr("attid");
				$(".t"+str).text($(this).find("option:selected").text());
				$(".t"+str).append($("<input type='hidden' name='atvid' value="+$(this).find("option:selected").attr("atvid")+" >"))
				
				//判断是否与数据库已有的规格是否重复
				var open=true;
				var zhuhe="";//属性值的组合,循环拼接成字符串再去判断
				$(".shuxing").each(function(){
					zhuhe=zhuhe+$(this).text();
				})
				
				<c:forEach var="s" items="${sublist}">
					var str="";
					<c:forEach var="at" items="${s.list}">
						str=str+"${at.atvname}";
					</c:forEach>
					if(str==zhuhe){
						open=false;
					}
				</c:forEach>
				if(!open){
					$(".chongfuselect").fadeIn(700);
					$(".chongfuselect").fadeOut(700);
					$(".shuxing").text("");
				}
			}
		})
		//图片回显
				$(".img-table tr td input").bind("change",function(){
					var read=new FileReader()
					var $input=$(this);
					read.readAsDataURL(this.files[0]);
					read.onload=function(){
					url=read.result // 拿到读取结果;
					 //DOM元素，不能是JQ对象
					$input.siblings().attr("src",url);
					}
				})
			
			$(".scount").on("input",function(){
				$(this).val($(this).val().replace(/[^\d]/g,""))
				if($(this).val()==0){
					$(this).val(10);
				}
				if($(this).val()>500){
					$(this).val(500);
				}
			})
			$(".price").on("input",function(){
				$(this).val($(this).val().replace(/[^\d\.]/g,""));
				
			})
		})
</script>
</head>
	<body>
		<div class="chongfuselect">
			<p>已存在该规格商品</p>
		</div>
		<div id="addcombox">
			<ul class="nav-tabs">
				<li class="active">
					<a>规格商品信息</a>
				</li>
			</ul>
			<div class="tab-content">
				<form class="content-form" action="addcomm?v=addfsp" method="post" enctype="multipart/form-data">
					<div class="content-form-item">
						<label class="content-form-label">
							商品名称
						</label>
						<div class="content-input-block">
							<input type="text" disabled="disabled" class="content-input" value="${cname}" placeholder="请输入商品名称" />
							<input type="hidden" value="${cname}" name="spname" />
							<input type="hidden" value="${cid}" name="cid" />
						</div>
					</div>
					
	
					<div class="content-form-item">
						<label class="content-form-label">
							商品数据
						</label>
						<div class="mail-option">
						<c:forEach var="ca" items="${camlist}">
							<span>${ca.attname}</span>
							<select attid="${ca.attid}">
								<option value ="">--请选择--</option>
								<c:catch>
								<c:forEach var="att" items="${ca.attvalueslist}" >
									<option atvid="${att.atvid}">${att.atvname}</option>
								</c:forEach>
								</c:catch>
							</select>
						</c:forEach>
							
						</div>
						<div class="inbox-body">
							<table class="list-table" id="guige-table">
								<thead>
									<tr>
										<th>商品库存</th>
										<th>销售价</th>
										<th>进价</th>
										<c:forEach var="c" items="${camlist}">
											<th>${c.attname}</th>
										</c:forEach>
									</tr>
								</thead>
								<tr>
									<td>
										<input type="text" value="100" class="scount" name="scount" >
									</td>
									<td>
										<input type="text" class="price" name="sprice" >
									</td>
									<td>
										<input type="text" class="price" name="sbid" >
									</td>
									<c:forEach var="c" items="${camlist}">
											<td class="t${c.attid} shuxing">
												
											</td>
									</c:forEach>
								</tr>
								
							</table>
						</div>
					</div>
					
					<div class="content-form-item">
						<label class="content-form-label">
							商品相册
						</label>
						<div class="inbox-body">
							<table class="list-table img-table">
								<tr>
									<td>
										<img src="imgs/htimgs/addspimg.png" />
										<input type="file" name="upimg1" accept="image/png,image/gif,image/jpg,image/jpeg" />
									</td>
									<td>
										<img src="imgs/htimgs/addspimg.png" />
										<input type="file" name="upimg2" accept="image/png,image/gif,image/jpg,image/jpeg" />
									</td>
									<td>
										<img src="imgs/htimgs/addspimg.png" />
										<input type="file" name="upimg3" accept="image/png,image/gif,image/jpg,image/jpeg" />
									</td>
									<td>
										<img src="imgs/htimgs/addspimg.png" />
										<input type="file" name="upimg4" accept="image/png,image/gif,image/jpg,image/jpeg" />
									</td>
									<td>
										<img src="imgs/htimgs/addspimg.png" />
										<input type="file" name="upimg5" accept="image/png,image/gif,image/jpg,image/jpeg" />
									</td>
								</tr>
							</table>
						</div>
					</div>
					<div class="content-form-item">
						<label class="content-form-label">
							
						</label>
						<div class="content-input-block">
							<input type="submit" value="保存" id="baocun" >
						</div>
					</div>
				</form>
				<div class="miaoshu">
					
				</div>
			</div>
		</div>
	</body>
</html>